<template>
	<div :style='{height: parentHeight, overflow: "hidden"}'>
		<!-- 搜索栏 -->
		<Search @get-height='handleGetHeight'/>
		<!-- 轮播图 -->
		<swiper indicator-dots>
			<swiper-item :key='item.goods_id' v-for='item in swiperData'>
				<image :src='item.image_src'/>
			</swiper-item>
		</swiper>
		<!-- 导航菜单 -->
		<div class="navs">
			<navigator url='' :key='index' v-for='(item, index) in menuData'>
        <image :src="item.image_src"></image>
      </navigator>
		</div>
		<!-- 商品楼层 -->
		<div class="floors">
			<div class="floor" :key='index' v-for='(item, index) in floorData'>
				<!-- 顶部的标题 -->
				<div class="title">
					<image :src='item.floor_title.image_src'/>
				</div>
				<!-- 底部的图片 -->
				<view class="items">
		      <navigator url='' :key='i' v-for='(pic, i) in item.product_list'>
		        <image :src="pic.image_src"></image>
		      </navigator>
		    </view>
			</div>
		</div>	
		<div class="goTop" v-show='isShow' @click='handleTop'>
			︿
		</div>
	</div>
</template>

<script>
	import Search from '@/components/search/index'
	export default {
		data() {
			return {
				title: '主页',
				parentHeight: 'auto',
				swiperData: [],
				menuData: [],
				floorData: [],
				isShow: false
			}
		},
		onLoad() {
			this.loadSwiperData()
			this.loadMenuData()
			this.loadFloorData()
		},
		onPageScroll (obj) {
			// 监听页面的滚动
			this.isShow = obj.scrollTop > 100
		},
		methods: {
			handleTop () {
				// 控制页面回到顶部
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			handleGetHeight (height) {
				// 设置父容器的高度
				this.parentHeight = height === 'auto'? height: height + 'px'
			},
			async loadSwiperData () {
				const data = await this.$request('home/swiperdata')
				if (data.meta.status === 200) {
					this.swiperData = data.message
				} else {
					uni.showToast(data.meta.msg)
				}
				// uni.request({
				// 	url: 'https://api-ugo-dev.itheima.net/api/public/v1/home/swiperdata',
				// 	success: (res) => {
				// 		if (res.data.meta.status === 200) {
				// 			this.swiperData = res.data.message
				// 		} else {
				// 			uni.showToast(res.data.meta.msg)
				// 		}
				// 	}
				// })
			},
			async loadMenuData () {
				const data = await this.$request('home/catitems')
				if (data.meta.status === 200) {
					this.menuData = data.message
				} else {
					uni.showToast(data.meta.msg)
				}
				// uni.request({
				// 	url: 'https://api-ugo-dev.itheima.net/api/public/v1/home/catitems',
				// 	success: (res) => {
				// 		if (res.data.meta.status === 200) {
				// 			this.menuData = res.data.message
				// 		} else {
				// 			uni.showToast(res.data.meta.msg)
				// 		}
				// 	}
				// })
			},
			async loadFloorData () {
				const data = await this.$request('home/floordata')
				if (data.meta.status === 200) {
					this.floorData = data.message
				} else {
					uni.showToast(data.meta.msg)
				}
				// uni.request({
				// 	url: 'https://api-ugo-dev.itheima.net/api/public/v1/home/floordata',
				// 	success: (res) => {
				// 		if (res.data.meta.status === 200) {
				// 			this.floorData = res.data.message
				// 		} else {
				// 			uni.showToast(res.data.meta.msg)
				// 		}
				// 	}
				// })
			}
		},
		components: {
			Search
		}
	}
</script>

<style lang="less">
	swiper {
		width: 750rpx;
		height: 340rpx;
		image {
			width: 750rpx;
			height: 340rpx;
		}
	}

	.navs {
		display: flex;
		padding: 24rpx;
		navigator {
			flex: 1;
			width: 128rpx;
			height: 140rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.floors {
		.floor {
			.title {
				width: 750rpx;
		    height: 60rpx;
		    padding: 20rpx 0 0 10rpx;
		    box-sizing: border-box;
		    background-color: #f4f4f4;
		    image {
		    	width: 100%;
					height: 100%;
		    }
			}
			.items {
				padding: 20rpx 16rpx;
				overflow: hidden;
				navigator {
					float: left;
					margin-left: 10rpx;
					&:first-child {
		        width: 232rpx;
		        height: 386rpx;
		        margin-left: 0;
		      }
		      &:nth-child(2),
		      &:nth-child(5) {
		      	width: 273rpx;
            height: 188rpx;
		      }
		      &:nth-child(3),
		      &:nth-child(4) {
		        width: 193rpx;
		        height: 188rpx;
		      }
		      &:nth-last-child(-n + 2) {
						margin-top: 10rpx;
		      }
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			&:first-child {
				.items {
					navigator {
						width: 232rpx;
	          height: 188rpx;
	          &:first-child {
	          	width: 232rpx;
	            height: 386rpx;
	          }
					}
				}
			}
		}
	}

	.goTop {
    position: fixed;
    bottom: 30rpx;
    right: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    font-size: 48rpx;
    color: #666;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }

</style>
